<template>
  <page-container :title="storeInfo ? false : '概况'">
    <div v-if="storeInfo" slot="content">
      <provider-info-item :providerInfo="storeInfo" />
    </div>
    <stat-info :statInfo="statInfo" />
    <a-card :bordered="false" style="margin-top:24px">
      <div class="ant-descriptions-title">门店</div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form1">
          <a-row :gutter="24">
            <a-col :md="3" :sm="24">
              <a-form-item label="门店类型">
                <a-select v-decorator="['store_type', { initialValue: 'clothes' }]" placeholder="选择类型">
                  <a-select-option value="clothes">洗衣门店</a-select-option>
                  <a-select-option value="appliance">家电门店</a-select-option>
                  <a-select-option value="house">家政门店</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="3" :sm="24">
              <a-form-item label="地区">
                <a-select v-decorator="['provinceid']" placeholder="省" @change="onProvinceChange($event, 'form1')">
                  <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.provinceid">{{
                    item.province
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-form-item>
                <a-select v-decorator="['cityid']" placeholder="市" @change="onCityChange($event, 'form1')">
                  <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.cityid">{{
                    item.city
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-form-item>
                <a-select v-decorator="['areaid']" placeholder="区">
                  <a-select-option :value="item.areaid" v-for="item in areaList" :key="item.areaid">{{
                    item.area
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入编号/名称" v-decorator="['name']" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table1.refresh(true)" icon="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table1"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="getStoreList"
        :pageSize="5"
        showPagination="auto"
        :pagination="{ 'show-total': total => `共 ${total} 条` }"
      >
        <span slot="actions" slot-scope="text, record">
          <template>
            <a @click="handleDetail(record.id)" style="margin-right: 10px">详情</a>
            <a @click="$refs.storePrice.show();storeInfoId=record.id">续费</a>
          </template>
        </span>
        <span slot="active" slot-scope="text, record">
          <template>
            <a @click="$refs.douyin.show();id=record.id;is_join=record.is_join">{{ record.is_join==1 ? "是" : "否"}}</a>
          </template>
        </span>
      </s-table>
    </a-card>
    <a-card :bordered="false" style="margin-top:24px">
      <div class="ant-descriptions-title">服务商</div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form2">
          <a-row :gutter="24">
            <a-col :md="3" :sm="24">
              <a-form-item label="地区">
                <a-select v-decorator="['provinceid']" placeholder="省" @change="onProvinceChange($event, 'form2')">
                  <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.provinceid">{{
                    item.province
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-form-item>
                <a-select v-decorator="['cityid']" placeholder="市" @change="onCityChange($event, 'form2')">
                  <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.cityid">{{
                    item.city
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-form-item>
                <a-select v-decorator="['areaid']" placeholder="区">
                  <a-select-option :value="item.areaid" v-for="item in areaList" :key="item.areaid">{{
                    item.area
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入编号/名称" v-decorator="['search']" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table2.refresh(true)" icon="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
        <s-table
          ref="table2"
          size="default"
          rowKey="uid"
          :columns="columns2"
          :data="getProviderList"
          :pageSize="5"
          :pagination="{ 'show-total': total => `共 ${total} 条` }"
        >
          <span slot="actions" slot-scope="text, record">
            <template>
              <a @click="handleProviderDetail(record.uid)">详情</a>
            </template>
          </span>
        </s-table>
      </div>
    </a-card>
    <!-- <div style="margin-top:24px">
      <store-clerk-stat-table :data="allStoreClerkList"/>
    </div> -->
    <douyin ref="douyin" :sid="id" @change="change()" :is_join="is_join"/>
    <storePrice ref="storePrice" :sid="storeInfoId" @change="change()"/>
  </page-container>
</template>

<script>
import StoreInfoItem from '@/components/StoreInfoItem'
import { provinceLink, cityLink, areaLink } from '@/api/notControl'
import { statList, storeList, providerList, allStoreClerkList } from '@/api/stat'
import StoreClerkStatTable from './modules/StoreClerkStatTable'
import StatInfo from '@/components/stat-info/stat-info'
import STable from '@/components/Table'
import { managerDetail } from '@/api/managerProvider'
import ProviderInfoItem from '@/components/ProviderInfoItem'
import douyin from './modules/douyin.vue'
import storePrice from '@/views/store/modules/storePrice'

const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '省',
    dataIndex: 'province'
  },
  {
    title: '市',
    dataIndex: 'city'
  },
  {
    title: '区',
    dataIndex: 'area'
  },
  {
    title: '总交易额',
    dataIndex: 'stat.gmv',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '线上交易额',
    dataIndex: 'stat.online',
    customRender (text, { stat }) {
      return '￥' + (stat.online_wxpay + stat.online_alipay + stat.online_wallet).toFixed(2)
    }
  },
  {
    title: '线下平台支付',
    dataIndex: 'stat.offline',
    customRender (text, { stat }) {
      return '￥' + (stat.offline_wallet + stat.offline_wxpay + stat.offline_alipay).toFixed(2)
    }
  },
  {
    title: '线下现金支付',
    dataIndex: 'stat.offline_wash',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '钱包',
    dataIndex: 'wallet',
    customRender (text, { stat }) {
      return '￥' + (stat.online_wallet + stat.offline_wallet).toFixed(2)
    }
  },
  {
    title: '系统到期时间',
    dataIndex: 'upkeep_time',
    customRender (text) {
      return judge(text)
      function judge(date){
        // 获取当前日期
        const targetDate = new Date(date);
        if(targetDate==null) return false;
        const currentDate = new Date();
        // 将当前日期与指定日期相减，得到相差的天数
        const diffDays = Math.ceil((targetDate.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24));
        console.log(diffDays)
        // 判断相差的天数是否在0到10之间
        if (diffDays >= 0 && diffDays <= 30) {
          return text + "(还有" + diffDays + "天到期)";
        }else if (diffDays <0) {
          return text + "(已过期)";
        }else {
          return text;
        }
      }
    }
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '120px',
    scopedSlots: { customRender: 'actions' }
  },
  {
    title: '是否参加抖音活动',
    dataIndex: 'is_join',
    width: '90px',
    scopedSlots: { customRender: 'active' }
  }
]

const columns2 = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '省',
    dataIndex: 'province'
  },
  {
    title: '市',
    dataIndex: 'city'
  },
  {
    title: '区',
    dataIndex: 'area'
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '150px',
    scopedSlots: { customRender: 'actions' }
  }
]

export default {
  name: 'Stat',
  components: {
    ProviderInfoItem,
    StoreInfoItem,
    StoreClerkStatTable,
    STable,
    StatInfo,
    douyin,
    storePrice
  },
  data () {
    this.columns = columns
    this.columns2 = columns2
    return {
      cityList: [],
      provinceList: [],
      areaList: [],
      earningList: [],
      storeInfo: null,
      statInfo: {},
      storeList: [],
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      allStoreClerkList,
      currentUid: undefined,
      id: '',
      is_join: '',
      storeInfoId: '',
    }
  },
  created () {
    this.getStatList()
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    change() {
      this.$refs.table1.refresh(true)
    },
    getStoreInfo (params) {
      managerDetail(params).then(res => {
        this.storeInfo = res.data
      })
    },
    getProviderList (parameter) {
      return this.getListWithParams(parameter, 'form2', providerList)
    },
    getStoreList (parameter) {
      return this.getListWithParams(parameter, 'form1', storeList)
    },
    getListWithParams (parameter, formType, action) {
      const values = this[formType].getFieldsValue()
      const province = this.provinceList.find(province => province.provinceid === values['provinceid']) || {}
      const city = this.cityList.find(city => city.cityid === values['cityid']) || {}
      const area = this.areaList.find(area => area.areaid === values['areaid']) || {}
      const params = {
        name: values.name,
        store_type: values.store_type,
        province: province.province,
        city: city.city,
        area: area.area,
        uid: this.currentUid
      }
      return action(Object.assign(parameter, params)).then(res => {
        return res.data
      })
    },
    getStatList () {
      statList({ uid: this.currentUid }).then(res => {
        this.statInfo = res.data
      })
    },
    handleDetail (id) {
      this.$router.push({
        name: 'storeStat',
        query: {
          id,
          type: this.form1.getFieldValue('store_type')
        }
      })
    },
    handleProviderDetail (uid) {
      // this.$router.push({
      //   name: 'providerStat',
      //   query: {
      //     uid
      //   }
      // })
      this.currentUid = uid
      this.getStoreInfo({ uid })
      this.getStatList()
      this.$refs.table1.refresh(true)
      this.$refs.table2.refresh(true)
      document.body.scrollIntoView({ behavior: 'smooth' })
    },
    onProvinceChange (provinceid, formId) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
        this[formId].setFieldsValue({ cityid: undefined })
      })
    },
    onCityChange (cityid, formId) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
        this[formId].setFieldsValue({ areaid: undefined })
      })
    }
  }
}
</script>
